<template>
  <div>
    <ul>
      <li
       @click="clickbox(index)"
        v-for="(item, index) in list"
        :key="index"
        :class="Lindex == index ? 'active' : ''"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
        Lindex:1,
      list: [
        { id: 1, name: "首页" },
        { id: 2, name: "爆爆团" },
        { id: 3, name: "订单" },
        { id: 4, name: "我的" },
      ],
    };
  },
 methods:{
        clickbox(index){
            this.Lindex = index
        }
    }
};
</script>

<style lang="css" scoped>
div {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 50px;
  background-color: white;
}
div ul{
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
}
div ul li.active{
    color: rgb(16, 90, 219);
}
</style>